<template>
    <div class="CommentsBox">
        <!-- 评论标题 -->
        <div class="comments_num">
                <p>最新评论({{this.comments.length}})</p>
        </div>
        <!-- 评论内容 -->
        <ul class="comtent">
          <li v-for="(item, index) in comments" :key="index">
            <div class="headImg">
              <div class="img" v-if="item.userHeadImg">
                <img :src="item.userHeadImg" alt="">
              </div>
              <div v-else class="img">
                <img src="../assets/img/img.jpg" alt="">
              </div>
            </div>
            <div class="comBox">
              <div class="comtentReight">
                <div class="comUser">
                  <p class="userName">{{item.userName}}</p>
                  <p class="time">{{item.dateCreated}}</p>
                </div>
                <div class="nice">
                  <p><span>{{item.totalSupports}}</span><span><i class="iconfont icon-zan"></i></span></p>
                </div>
              </div>
              <div class="com">
                  {{item.content}}
              </div>
            </div>
          </li>
        </ul>
    </div>
</template>
<script>
import jsonp from "jsonp";
export default {
  name: "CommentsBox",
  data() {
    return {
      comments: []
    };
  },

  created() {
    jsonp(
      "http://comment.yinyuetai.com/mv/video-comment-list?belongId=" +
        this.$store.state.video.videoId +
        "&page=1",
      null,
      (err, res) => {
        if (!err) {
          this.comments = res.data;
        } else {
          console.log(err);
        }
      }
    );
  }
};
</script>
<style lang='scss' scoped>
// mv评论
.CommentsBox {
  overflow: auto;
  width: 100%;
  height: 100%;
  // mv评论标题
  .comments_num {
    height: 0.8rem;
    width: 100%;
    p {
      font-size: 0.3rem;
      padding-left: 0.3rem;
      line-height: 0.8rem;
    }
  }
  // 评论内容
  .comtent {
    width: 100%;
    // height: 100%;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 10rem;
    li {
      padding: 0.35rem 0.35rem;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e4e6;
      background-color: #fff;
      .headImg {
        width: 20%;
        height: 1rem;
        float: left;
        position: relative;
        .img {
          width: 1.2rem;
          height: 1.2rem;
          overflow: hidden;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .comBox {
        width: 75%;
        float: left;
        .comtentReight {
          width: 100%;
          overflow: hidden;
          .comUser {
            float: left;
            .userName {
              text-align: left;
              font-size: 12px;
              color: #888;
            }
            .time {
              text-align: left;
              margin-top: 0.1rem;
              color: #9f9e9e;
              font-size: 10px;
            }
          }
          .nice {
            float: right;
            color: #404040;
            span {
              font-size: 12px;
            }
            i {
              margin-left: 0.1rem;
              font-size: 15px;
            }
          }
        }
        .com {
          padding: 0.2rem 0;
          font-size: 12px;
          color: #3f3f3f;
        }
      }
    }
  }
}
</style>

